<!-- 直播 -->
<template>
	<view>
		<view class="live_list">
			<view class="live_list_li" @click="comein">
				<view class="live_list_li_ve">
					<image src="../../static/2019-02-03_131907.png" mode="aspectFill"></image>
					<view class="live_list_li_ve_title">
						<view class="live_list_li_ve_title_l">
							<view>房间号：868</view>
						</view>
						<view class="live_list_li_ve_title_r">
							<view>来聊聊天</view>
						</view>
					</view>
				</view>
			</view>
			<view class="live_list_li">
				<view class="live_list_li_ve" @click="comein">
					<image src="../../static/01.png" mode="aspectFill"></image>
					<view class="live_list_li_ve_title">
						<view class="live_list_li_ve_title_l">
							<view>房间号：686</view>
						</view>
						<view class="live_list_li_ve_title_r">
							<view>女神来了</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="live_list_li">
				<view class="live_list_li_ve" @click="comein">
					<image src="../../static/11.jpg" mode="aspectFill"></image>
					<view class="live_list_li_ve_title" >
						<view class="live_list_li_ve_title_l">
							<view>房间号：888</view>
						</view>
						<view class="live_list_li_ve_title_r">
							<view>宝宝</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			comein() {
			    uni.navigateTo({
			    	url:"../liveshow/liveshow?role=" + 21
			    })
			}
			},
		onLoad() {
			uni.setTabBarBadge({
			  index: 3,
			  text: '3'
			})
			uni.setTabBarBadge({ 
			  index: 4,
			  text: '6' 
			})
			
		},
		onPageScroll: function(e) {
			// if(e.scrollTop>=10){
			// 	uni.hideTabBar({
			// 		animation:true
			// 	});
			// }else if(e.scrollTop<=10){
			// 	uni.showTabBar({
			// 		animation:true
			// 	});
			// }
		}
		
	}
</script>

<style>
	page{background:#212131;}
	.live_list{
		padding-left:10upx;
		padding-right:10upx;
		padding-top:10upx;
	}
	.live_list .live_list_li{
		height:300upx;
		width:50%;
		border:0px red solid;
		float: left;
		box-sizing: border-box;
		padding:10upx;
	}
	.live_list .live_list_li .live_list_li_ve{
		width:100%;
		height:100%;
		border:0upx green solid;
		border-radius:20upx;
		overflow: hidden;
	}
	.live_list .live_list_li .live_list_li_ve image{
		width:100%;
		height:100%;
	}
	.live_list .live_list_li .live_list_li_ve .live_list_li_ve_title{
		position: relative;
		border:0px red solid;
		width:100%;
		height:50upx;
		top:-65upx;
	}
	.live_list .live_list_li .live_list_li_ve .live_list_li_ve_title .live_list_li_ve_title_l,.live_list_li_ve_title_r{
		height:100%;
		width:50%;
		border:0px yellow solid;
		float: left;
		box-sizing: border-box;
	}
	.live_list .live_list_li .live_list_li_ve .live_list_li_ve_title .live_list_li_ve_title_r,.live_list_li_ve_title_l{
		padding:5upx;
	}
	.live_list .live_list_li .live_list_li_ve .live_list_li_ve_title .live_list_li_ve_title_r{padding-right:13upx;}
	.live_list .live_list_li .live_list_li_ve .live_list_li_ve_title .live_list_li_ve_title_r view{
		color:#fff;
		font-size:20upx;
		height:100%;
		background:#FA6185;
		border-radius:10upx;
		padding-left:10upx;
		padding-right:10upx;
		float: right;
		right:0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.live_list .live_list_li .live_list_li_ve .live_list_li_ve_title .live_list_li_ve_title_l view{
		height:100%;
		border:0px red solid;
		color:#fff;
		font-size:25upx;
		float: left;
		left:0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left:10upx;
	}
</style>
